<h4>Limited CSS</h4>

<p>For security reasons, you can only use a limited set of CSS properties and values on this archive.</p>

<dl id="help">
  <dt>Font and Font Family</dt>
  <dd id="css_fonts">
    <p>
      Unfortunately, you cannot use the font shorthand in your CSS. All font properties have to be specified separately, eg, 
      <tt>font-size: 1.1em; font-weight: bold; font-family: Cambria, Constantia, Palatino, Georgia, serif;</tt>
    </p>
    <p>
      In the font-family property, we allow you to specify any font with an alphanumeric name. 
      You can (but don't have to) specify the name with single or double quotes
      around it, just make sure the quotes match. (eg, 'Gill Sans' and "Gill Sans" are both fine; 'Gill Sans" won't work.)
      Keep in mind that a font has to be installed on the user's operating system to work. It's a good idea when specifying fonts to use 
      fallbacks in case your first-choice font isn't available. 
      See <a href="http://www.fonttester.com/help/list_of_web_safe_fonts.html">a set of web-safe fonts with fallbacks</a>.
    </p>
    <p>
      We CANNOT allow the font-face attribute. Sorry! If you have an uncommon font that you want to 
      use in a skin you would like to share, we suggest adding a comment in your skin with a pointer to a place for users 
      to download the font themselves, and using web-safe fonts as fallbacks.
    </p>
  </dd>
    
  <dt>Properties</dt>
  <dd id="css_properties">
    We also allow the following properties: <br />
    <code>
accelerator, azimuth, background, background-color, behavior, border, border-bottom-color, border-collapse, border-color, border-left-color, border-right-color, border-top-color, bottom, box-shadow, caption-side, clear, clip, color, content, counter-increment, counter-reset, cue, cursor, direction, display, elevation, empty-cells, filter, float, font-family, font-size, font-style, font-variant, font-weight, height, ime-mode, include-source, layer-background, layout-flow, layout-grid, left, letter-spacing, line-break, line-height, list-style, margin, marker-offset, marks, max-height, max-width, min-height, min-width, orphans, outline, overflow, padding, page, page-break, pause, pause-after, pause-before, pitch, pitch-range, play-during, position, quotes, richness, right, ruby-align, ruby-overhang, ruby-position, scrollbar, size, speak, speak-header, speak-numeral, speak-punctuation, speech-rate, stress, table-layout, text, text-align, text-decoration, text-indent, top, transform, transition, unicode-bidi, vertical-align, visibility, voice-family, volume, white-space, widows, width, word-break, word-spacing, word-wrap, writing-mode, z-index,
-moz-border, -moz-box-shadow, -moz-opacity, -moz-outline, -moz-transform, -moz-transition, -moz-user-select, -replace, -use-link-source, -webkit-box-shadow, -webkit-transform, -webkit-transition       
    </code>
  </dd>

  <dt>URLs</dt>
  <dd id="css_urls">
    We allow external image urls (specified as url('http://somesite.com/my_awesome_image.jpg')) in JPG, GIF, and PNG formats. 
    Please note however that skins using external images will not be approved for public use.  
  </dd> 

  <dt>Keywords</dt>
  <dd id="css_keywords">
    We allow the following keywords: <br />
    <code>
!important, absolute, all, auto, bigger, blink, block, bold, both, bottom, center, collapse, dashed, dotted, ease-in, hidden, inline, italic, justify, left, medium, no-repeat, none, normal, nowrap, overline, pointer, repeat, repeat-x, repeat-y, right, scroll, small-caps, smaller, solid, static, top, transparent, underline, url
    </code>
  </dd>
  
  <dt>Numeric Values</dt>
  <dd id="css_numeric">
    <p>
      You can specify numeric values up to two decimal places, either as percentages or in <a href="http://w3schools.com/css/css_units.asp">various units</a>: <br />
      <code>cm, em, ex, in, mm, pc, pt, px</code>
    </p>
    <p>
      PS: we highly encourage learning about and using <code>em</code>, which lets you set things relative to the viewer's current font size! 
      It will make your layouts much more flexible and responsive to different browser/font settings.
    </p>
  </dd>

  <dt>Colors</dt> 
  <dd id="css_colors">
    You can specify colors using hex values (eg, #000000 is black in hex) or with rgb or rgba values (eg, rgb(0,0,0) and rgba(0,0,0,0) both give you black). 
    This may be safer since not all browsers will necessarily support all color names. However, color names are more
    readable and easier to remember, so we allow 
    <a href="http://www.w3schools.com/css/css_colornames.asp">the set of commonly-supported color names</a>:<br />
    
    <code>aliceblue, antiquewhite, aqua, aquamarine, azure, beige, bisque, black, blanchedalmond, blue, blueviolet, brown, burlywood, cadetblue, chartreuse, chocolate, coral, cornflowerblue, cornsilk, crimson, cyan, darkblue, darkcyan, darkgoldenrod, darkgray, darkgreen, darkkhaki, darkmagenta, darkolivegreen, darkorange, darkorchid, darkred, darksalmon, darkseagreen, darkslateblue, darkslategray, darkturquoise, darkviolet, deeppink, deepskyblue, dimgray, dodgerblue, firebrick, floralwhite, forestgreen, fuchsia, gainsboro, ghostwhite, gold, goldenrod, gray, green, greenyellow, honeydew, hotpink, indianred, indigo, ivory, khaki, lavender, lavenderblush, lawngreen, lemonchiffon, lightblue, lightcoral, lightcyan, lightgoldenrodyellow, lightgrey, lightgreen, lightpink, lightsalmon, lightseagreen, lightskyblue, lightslategray, lightsteelblue, lightyellow, lime, limegreen, linen, magenta, maroon, mediumaquamarine, mediumblue, mediumorchid, mediumpurple, mediumseagreen, mediumslateblue, mediumspringgreen, mediumturquoise, mediumvioletred, midnightblue, mintcream, mistyrose, moccasin, navajowhite, navy, oldlace, olive, olivedrab, orange, orangered, orchid, palegoldenrod, palegreen, paleturquoise, palevioletred, papayawhip, peachpuff, peru, pink, plum, powderblue, purple, red, rosybrown, royalblue, saddlebrown, salmon, sandybrown, seagreen, seashell, sienna, silver, skyblue, slateblue, slategray, snow, springgreen, steelblue, tan, teal, thistle, tomato, turquoise, violet, wheat, white, whitesmoke, yellow, yellowgreen</code><br />
        
  </dd>

  <dt>Scale</dt>
  <dd id="css_scale">
    <p>
      You can specify scale (for the "transform" property) as <code>scale(numeric value)</code> where the numeric value can be 
      specified up to two decimal places. 
    </p>
  </dd>
  
  <dt>Comments</dt>
  <dd id="css_comments">
    <p>You can use comments either before or after a complete block of CSS, but not in the middle. (PS: comments are awesome!)</p>
    <p>This will work fine:<br />
    <code>
      /* here is a comment before my awesome code */<br />
      body {background: #fff;}<br />
      /* here is a comment after my  awesome code */
    </code>
    </p>
    <p>This will not work:<br />
      <code>
        body {/* comment in the middle of my code */ background: #fff;}
      </code>
    </p>
  </dd>
    
</dl>
